<template>
	<el-dialog :visible.sync="hasSetPassword" width="456px" top="20vh" append-to-body :show-close="false"
		custom-class="register_page">
		<div class="logo_box">
			<i class="el-icon-close" @click="handleClose()"></i>
		</div>
		<div class="h1">
			{{$t('home.setPassword')}}
		</div>
		<div class="page_cont">
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0" class="demo-ruleForm">
				<el-form-item prop="old_password">
					<div class="input_box">
						<el-input v-model="ruleForm.old_password" :placeholder="$t('login.enenterOldPassword')" show-password>
							<div class="acc_box" slot="prepend">
								<img src="@/assets/images/login/pas.png" />
								<el-divider direction="vertical"></el-divider>
							</div>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item prop="new_password">
					<div class="input_box">
						<el-input v-model="ruleForm.new_password" :placeholder="$t('login.enenterNewPassword')" show-password>
							<div class="acc_box" slot="prepend">
								<img src="@/assets/images/login/pas.png" />
								<el-divider direction="vertical"></el-divider>
							</div>
						</el-input>
					</div>
				</el-form-item>
				<el-form-item prop="secondary_password">
					<div class="input_box">
						<el-input v-model="ruleForm.secondary_password" :placeholder="$t('login.enenterNewPasswordAgain')"
							show-password>
							<div class="acc_box" slot="prepend">
								<img src="@/assets/images/login/pas.png" />
								<el-divider direction="vertical"></el-divider>
							</div>
						</el-input>
					</div>
				</el-form-item>
				<el-button class="but" @click="handleRest()">{{$t('home.setPasswordBut')}}</el-button>
			</el-form>
		</div>
	</el-dialog>
</template>

<script>
	import {
		userAmendPassword
	} from '@/api/home'
	import Cookie from 'vue-cookies'
	export default {
		props: {},
		components: {},
		data() {
			return {
				type: 'email',
				loading: false,
				intimer: null,
				dwonCodeText: '',
				areaList: [], // 地区区号
				ruleForm: {
					old_password: '',
					new_password: '',
					secondary_password: '',
				},

			}
		},
		computed: {
			hasSetPassword: {
				get() {
					return this.$store.state.hasSetPassword
				},
				set(val) {
					this.$store.commit('changeSetPassword', false)
				}
			},
			rules() {
				var validatePass2 = (rule, value, callback) => {
					if (value === '') {
						callback(new Error(this.$t('login.pleaseEnterPasswordAgain')))
					} else if (value !== this.ruleForm.new_password) {
						callback(new Error(this.$t('login.thePasswordNot')))
					} else {
						callback()
					}
				}
				return {
					old_password: [{
						required: true,
						message: this.$t('login.passwordValidate'),
						trigger: 'change'
					}],
					new_password: [{
						required: true,
						message: this.$t('login.passwordValidate'),
						trigger: 'change'
					}],
					secondary_password: [{
						required: true,
						validator: validatePass2,
						trigger: 'change'
					}],
				}
			},
		},
		watch: {},
		mounted() {},
		methods: {
			handleClose() {
				// this.$router.go(-1)
				this.$store.commit('changeSetPassword', false)
			},
			handleRest() {
				this.$refs.ruleForm.validate(async (valid) => {
					if (valid) {
						const res = await userAmendPassword({
							...this.ruleForm,
						})
						if (res && res.code == 1) {
							this.$message.success(res.msg)
							localStorage.clear('LOGIN_USER_INFO')
							localStorage.clear('TOKEN')
							this.$store.commit('onChangeUserInfo', {})
							this.$store.commit('changeSetPassword', false)
						} else {
							this.$message.error(res.msg)
						}
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		}
	}
</script>

<style lang="less">
	.register_page {
		position: relative;
		background: #1C232E;
		border-radius: 18px;

		.el-dialog__body {
			padding: 43px 48px 48px;
		}

		.el-dialog__header {
			display: none;
		}

		.logo_box {
			position: absolute;
			right: 18px;
			top: 18px;
			cursor: pointer;

			i {
				font-size: 24px;
				color: #fff;
			}
		}

		.h1 {
			font-family: PingFang SC;
			font-size: 24px;
			margin-bottom: 30px;
			text-align: left;
			color: #fff;
			font-weight: bold;
		}

		.page_cont {
			// padding: 25px 15px 5px;

			.input_box {
				background-color: #12171D;
				border-radius: 10px;
			}

			.el-input__inner {
				background-color: transparent;
				border: 0;
				// border-radius: 10px;
				color: #fff;
				padding-left: 0;
				height: 48px;
				line-height: 48px;
			}

			.el-input-group__append,
			.el-input-group__prepend {
				background-color: transparent;
				border: 0;
			}

			.acc_box {
				width: 100%;
				height: 100%;
				display: flex;
				align-items: center;

				img {

					width: 18px;
					height: 18px;
				}

				.el-divider--vertical {
					height: 18px;
					background-color: #303237;
					margin-left: 12px;
					margin-right: 0;
				}
			}

			.but {
				width: 100%;
				height: 48px;
				background-color: #137EFE;
				border: 0;
				border-radius: 10px;
				color: #fff;
				margin-top: 20px;
			}
		}
	}
</style>